"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Platform } from "react-native"
import { Volume2, BookOpen } from "lucide-react-native"
import { theme } from "../../constants/theme"

interface NaturalReadingViewProps {
    word: {
        word: string
        syllables: string[]
        phoneticSyllables: string[]
        naturalReadingData: Array<{
            letter: string
            phonetic: string
            color: string
        }>
    }
}

// 模拟的同类单词数据
const SIMILAR_WORDS_DATA = {
    bl: [
        {
            word: "blessing",
            phonetic: "/ˈblesɪŋ/",
            meaning: '祝福；保佑；"bless"的现在分词',
        },
        {
            word: "blend",
            phonetic: "/blend/",
            meaning: "混合；调和",
        },
        {
            word: "bloom",
            phonetic: "/bluːm/",
            meaning: "开花；繁荣",
        },
    ],
    e: [
        {
            word: "essay",
            phonetic: "/ˈeseɪ/",
            meaning: "散文；随笔",
        },
        {
            word: "echo",
            phonetic: "/ˈekəʊ/",
            meaning: "回声；共鸣",
        },
    ],
    ss: [
        {
            word: "lesson",
            phonetic: "/ˈlesn/",
            meaning: "课程；教训",
        },
        {
            word: "passion",
            phonetic: "/ˈpæʃn/",
            meaning: "激情；热情",
        },
    ],
    ing: [
        {
            word: "singing",
            phonetic: "/ˈsɪŋɪŋ/",
            meaning: "唱歌；歌唱",
        },
        {
            word: "running",
            phonetic: "/ˈrʌnɪŋ/",
            meaning: "跑步；运行",
        },
    ],
}

export function NaturalReadingView({ word }: NaturalReadingViewProps) {
    const [selectedSyllable, setSelectedSyllable] = useState(word.syllables[0])
    const [isPlaying, setIsPlaying] = useState(false)

    const handlePlayAudio = () => {
        setIsPlaying(true)
        // 模拟音频播放
        setTimeout(() => setIsPlaying(false), 1000)
    }

    const handleSyllablePress = (syllable: string) => {
        setSelectedSyllable(syllable)
    }

    // 获取音节对应的颜色
    const getSyllableColor = (syllable: string) => {
        switch (syllable) {
            case "bl":
                return "#5B8EF4"
            case "e":
                return "#FF9500"
            case "ss":
                return "#5B8EF4"
            case "ing":
                return "#34C759"
            default:
                return "#5B8EF4"
        }
    }

    return (
        <View style={styles.container}>
            {/* 单词显示 */}
            <View style={styles.wordContainer}>
                <Text style={styles.wordTitle}>单词拆分</Text>
                <View style={styles.syllablesRow}>
                    {word.syllables.map((syllable, index) => {
                        const color = getSyllableColor(syllable)
                        return (
                            <TouchableOpacity
                                key={`syllable-${index}`}
                                style={[
                                    styles.syllableButton,
                                    { backgroundColor: `${color}20` },
                                    selectedSyllable === syllable && { backgroundColor: `${color}40`, borderColor: color },
                                ]}
                                onPress={() => handleSyllablePress(syllable)}
                            >
                                <Text style={[styles.syllableText, { color }]}>{syllable}</Text>
                                <Text style={styles.phoneticText}>{word.phoneticSyllables[index]}</Text>
                            </TouchableOpacity>
                        )
                    })}
                </View>
            </View>

            {/* 同类单词卡片 */}
            <View style={styles.similarWordsCard}>
                <View style={styles.cardHeader}>
                    <View style={[styles.syllablePreview, { backgroundColor: getSyllableColor(selectedSyllable) }]}>
                        <Text style={styles.selectedSyllable}>{selectedSyllable}</Text>
                    </View>
                    <View style={styles.cardTitleContainer}>
                        {/* <BookOpen size={16} color={theme.colors.primary.default} style={styles.cardTitleIcon} /> */}
                        <Text style={styles.cardTitle}>同类单词</Text>
                        <Text style={styles.cardSubtitle}>《Reading Explorer 5》</Text>
                    </View>
                </View>

                <ScrollView style={styles.wordsList}>
                    {SIMILAR_WORDS_DATA[selectedSyllable]?.map((item, index) => (
                        <View key={index} style={styles.wordItem}>
                            <View style={styles.wordItemLeft}>
                                <Text style={styles.itemWord}>{item.word}</Text>
                                <Text style={styles.itemPhonetic}>{item.phonetic}</Text>
                            </View>
                            <View style={styles.wordItemRight}>
                                <Text style={styles.itemMeaning}>{item.meaning}</Text>
                                <TouchableOpacity style={styles.audioButton} onPress={handlePlayAudio}>
                                    <Volume2 size={16} color={theme.colors.primary.default} />
                                </TouchableOpacity>
                            </View>
                        </View>
                    ))}
                </ScrollView>
            </View>

            {/* 查找更多按钮 */}
            <TouchableOpacity style={styles.findMoreButton}>
                <Text style={styles.findMoreText}>查找更多，书外同根单词</Text>
            </TouchableOpacity>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingHorizontal: theme.spacing.lg,
    },
    wordContainer: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        marginBottom: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.5,
                shadowRadius: 8,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    wordTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.darkGray,
        marginBottom: theme.spacing.md,
        textAlign: "center",
    },
    syllablesRow: {
        flexDirection: "row",
        justifyContent: "center",
        flexWrap: "wrap",
        gap: theme.spacing.xs,
    },
    syllableButton: {
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.md,
        borderRadius: theme.borderRadius.medium,
        minWidth: 50,
        alignItems: "center",
        borderWidth: 1,
        borderColor: "transparent",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 4,
            },
            android: {
                elevation: 2,
            },
        }),
    },
    syllableText: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        marginBottom: 4,
    },
    phoneticText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
        fontFamily: Platform.OS === "ios" ? "Helvetica" : "normal",
    },
    similarWordsCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        marginBottom: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.5,
                shadowRadius: 8,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    cardHeader: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.lg,
        paddingBottom: theme.spacing.md,
        borderBottomWidth: 1,
        borderBottomColor: theme.colors.neutral.lightGray,
    },
    syllablePreview: {
        width: 44,
        height: 44,
        borderRadius: 22,
        alignItems: "center",
        justifyContent: "center",
        marginRight: theme.spacing.md,
    },
    selectedSyllable: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.white,
    },
    cardTitleContainer: {
        flex: 1,
    },
    cardTitleIcon: {
        marginBottom: theme.spacing.xs,
    },
    cardTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginBottom: 2,
    },
    cardSubtitle: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
    },
    wordsList: {
        maxHeight: 300,
    },
    wordItem: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingVertical: theme.spacing.md,
        borderBottomWidth: 1,
        borderBottomColor: theme.colors.neutral.lightGray,
    },
    wordItemLeft: {
        flex: 1,
    },
    itemWord: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.black,
        marginBottom: 2,
    },
    itemPhonetic: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
        fontFamily: Platform.OS === "ios" ? "Helvetica" : "normal",
    },
    wordItemRight: {
        flexDirection: "row",
        alignItems: "center",
        gap: theme.spacing.md,
    },
    itemMeaning: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
    },
    audioButton: {
        padding: 4,
    },
    findMoreButton: {
        backgroundColor: `${theme.colors.primary.default}10`,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        alignItems: "center",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.05)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 4,
            },
            android: {
                elevation: 2,
            },
        }),
    },
    findMoreText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
})

